<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('隐患数量趋势图/日')" />
</head>

<body>
<input id="data" type="hidden" th:value="${data}"/>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:400px;"></div>
</body>
<th:block th:include="include :: footer" />
<script src="/libs/echarts/echarts.min.js"></script>

<script type="text/javascript">
    var data = $("#data").val();
    var xAxis_data = [];
    var series_data = [];

    var hidden_data = JSON.parse(data);
    var sum = hidden_data.sum;

    var data_details = hidden_data.data;
    var series_details1 = {name:'一般隐患',type:'line',data:[]};
    var series_details2 = {name:'较大隐患',type:'line',data:[]};
    var series_details3 = {name:'重大隐患',type:'line',data:[]};
    var series_details4 = {name:'所有隐患',type:'line',data:[]};

    for(var i in data_details){
        if(data_details[i].name == "一般隐患"){
            series_details1.data.push(data_details[i].values);
        }else if(data_details[i].name == "较大隐患"){
            series_details2.data.push(data_details[i].values);
        }else if(data_details[i].name == "重大隐患"){
            series_details3.data.push(data_details[i].values);
        }
    }

    for(var i in sum){
        xAxis_data.push(sum[i].key);
        series_details4['data'].push(sum[i].values);
    }

    series_data.push(series_details1);
    series_data.push(series_details2);
    series_data.push(series_details3);
    series_data.push(series_details4);

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '隐患数量趋势图/日',
            subtext: '实时数据',
            x:'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data:['一般隐患','较大隐患','重大隐患','所有隐患']
        },
        grid: {
            left: '5%',
            right: '5%',
            bottom: '10%',
            top: '35%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxis_data
        },
        yAxis: {
            type: 'value'
        },
        series: series_data
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>





<!--<ul>-->
    <!--<li th:each="data:${data}">-->
        <!--<div>-->
            <!--<input id="1" th:text="${data.sum}" type="text">-->
            <!--<input id="2" th:text="${data.data} " type="text">-->
        <!--</div>-->
    <!--</li>-->
<!--</ul>-->
</html>